<template>
	<view class="container" :class="{active:show}" @tap.stop="close">
		<view class="box" @tap.stop="open">
			<view class="item" v-for="(item,index) in list" :key="index" @tap.stop="checkItem(index)" :style="{ color: isColor ? item.color : color}">{{item.text}}</view>
			<!-- <view class="item">内容2</view>
			<view class="item">内容3</view>
			<view class="item">内容4</view> -->
			<view class="item" @tap.stop="close">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
			  // 当前选中值
			  type: [Number, String],
			  default: 0
			},
			list: { //数据列表
				//{color: 字体颜色 默认值为#333}
				type: [Array],
				default() {
					return []
				}
			},
			isColor: {
				//如果值为false 则统一自定义颜色
				//如果值为true 则列表每一项单独定义颜色  颜色应写咋list内部 为对象的每一个color属性值
				type: [Boolean],
				default() {
					return false
				}
			},
			color: {
				//为统一定义的文字color属性值 isColor为true时
				type: [String],
				default() {
					return '#222'
				}
			}
		},
		data() {
			return {
				index: 0, //当前选中下标
				show: false//是否展示
			}
		},
		onLoad() {
			
		},
		methods: {
			/**
			 * 点击关闭模态框
			 */
			close() {
				this.$emit('change', {
					show: false
				});
				this.$nextTick(() => {
					setTimeout(() => {
						this.show = false;
					}, 10);
				});
			},
			/**
			 * 点击打开模态框
			 */
			open() {
				this.$emit('change', {
					show: true
				});
				this.show = true;
				
			},
			/**
			 * 选中某一项
			 * @param {index} 选中下标
			 */
			checkItem(index) {
				this.$emit("input", index);
				this.close();
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background: rgba(0, 0, 0, .3);
		bottom: -100%;
		z-index: 9999;
		transition: all .1s ease;
		opacity: 1;
		.box {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			overflow: hidden;
			background-color: #fff;
			max-height: 60vh;
			overflow-y: auto;
			.item {
				width: 100%;
				line-height: 88rpx;
				text-align: center;
				border-bottom: 1rpx solid #efefef;
			}
		}
	}
	
	.container.active {
		bottom: 0;
		opacity: 1;
	}
</style>
